<!DOCTYPE html>
<html lang="en" >

<head>
	<meta charset="UTF-8">
	<title>在线聊天室</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/reset.min.css">
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div class="wrapper">
		<div class="container">
			<div class="left">
				<div class="top"> 在线人员 </div>
				<ul class="people">
					<li class="person" data-chat="person1">
						<img src="img/thomas.jpg" alt="" />
						<span class="name">张三</span>
						<span class="time">10:09</span>
					</li>
					<li class="person" data-chat="person2">
						<img src="img/dog.png" alt="" />
						<span class="name">李四</span>
						<span class="time">10:44</span>
					</li>
					<li class="person" data-chat="person3">
						<img src="img/louis-ck.jpeg" alt="" />
						<span class="name">王五</span>
						<span class="time">10:50</span>
					</li>
				</ul>
			</div>
			<div class="right">
				<div class="top"><span><span class="name">聊天室</span></span></div>
				<div class="chat" data-chat="person2">
					<template v-for='item in msglist'>
						<div :class="item.style">
							{{ item.data }}
						</div>
					</template>
				</div>
				<div class="write">
					<input type="text" v-model="msg" placeholder="输入内容" @keydown.enter="send" />
					<a @click.prevent="send" class="write-link send"></a>
				</div>
			</div>
		</div>
	</div>

	<script src="js/index.js"></script>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
	const ws = new WebSocket('ws://121.4.59.57:9200');
	ws.onopen = () =>{
		console.log("连接建立")
	}
	ws.onmessage = ({data}) =>{
		let json = JSON.parse(data)
		vm.msglist.push(json)
	}
	const vm = new Vue({
		el:".wrapper",
		data:{
			msg: '',
			msglist: []
		},
		methods:{
			send() {
				ws.send(this.msg);
				this.msg = ''
			}
		}
	})
</script>